<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A-Tag</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .aTag{
      margin: 50px auto;
      position: relative;
      width: 500px;
      height: 1000px;
      border: 1px solid gray;
      font-size: 12px;
      padding: 30px;
      background-image: url(../../img/1.jpg);
      background-size: 100% 100%;
      background-attachment: fixed;
      background-origin: content-box;
      background-color: hsl(120, 50%, 50%); /* 背景图去掉即可查看 */
    }
    .aTag>a:link{
      color: red;
    }
    .aTag>a:visited{
      color: yellow;
    }
    .aTag>a:hover{
      color: blue;
    }
    .aTag>a:active{
      color: pink;
    }
    .aTag>input:focus{
      color: red;
    }

    /* .domForLong>div:long(en)>q{
      quotes: '\201C' '\201D' '\2018' '\2019';
    } */

    .notFors{
      width: 200px;
      height: 100px;
      background-color: gray;
    }
    .notFors>li{
      width: 100%;
      height: 20px;
    }
    .notFors>li:not(:last-child){
      border-bottom: 1px solid red;
    }
    p:first-of-type{
      color: red;
    }
    p:last-of-type{
      color: yellow;
    }
    ul:only-of-type{
      color: white;
    }
    p:empty,span:empty{
      display: inline-block;
      width: 100px;
      height: 20px;
      border: 3px dashed red;
    }
    span:enabled{
      border: 1px double pink;
    }
    #target:target{
      color: red;
    }
    .first-letter{
      margin-top: 100px;
      width: 100px;
      height: 200px;
      border: 1px dashed gray;
    }
    .first-letter::first-letter{
      color: pink;
    }
    .first-letter::first-line{
      color: red;
    }
  </style>
</head>
<body>
  <div class="aTag">
    <a href="">121231233</a>
    <input type="text" value="123">
    <div class="domForLong">
      <div long="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
      <div long="fr"><q>This French  quote has a <q>nested</q> quote inside.</q></div>
      <div long="de"><q>This German  quote has a <q>nested</q> quote inside.</q></div>
    </div>
    <ul class="notFors">
      <p></p>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <p>first-of-type选中p元素，这里既是first又是last</p>
      <span></span>
    </ul>
    <div class="first-letter">
      设置对象内的第一个字符的样式。三大势力对抗弗拉斯卡地方
    </div>
    <div class="placeholder"></div>
  </div>
  <div id="target">
    <p>E:target伪类使用方法</p>
  </div>
</body>
</html>